<template>
	<view>
		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoClose"> ×
				</cover-view>

				<cover-view class="downloadVideo flex items-center justify-around">
					<cover-image src="http://api.fceos.cn/qiliaoyun/profile/appImages/download.png"
						class="download-image" mode="" @click="downLoad"></cover-image>
				</cover-view>
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		name: "videoPlay",
		data() {
			return {

			};
		},
		props: {
			previewVideoSrc: {
				require: true,
				typeof: "string"
			}
		},
		methods: {
			previewVideoClose() {
				this.$emit('close')
			},
			downLoad() {
				uni.showLoading({
					title:'下载中...'
				})
				uni.downloadFile({
					url:this.previewVideoSrc,
					success:(res)=>{
						uni.hideLoading()
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success:()=> {
								this.$modal.msg('视频保存成功!')
							},
							fail:()=>{
								console.log('fail');
							}
						});
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 99999999999;
	}

	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 99999999999;
	}

	.preview-full-close {
		position: fixed;
		left: 32rpx;
		top: 84rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 99999999999;
		/* 	background-color: #808080; */
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
	}

	.downloadVideo {
		width: 56rpx;
		height: 56rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 102rpx;
		z-index: 9;
		background-color: rgba(0, 0, 0, .5);
		border-radius: 50%;

		.download-image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>